<template>
  <div class="detailView">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in info.gallery" :key="index">
        <img :src="item" alt="" class="homeImg" />
      </van-swipe-item>
    </van-swipe>

    <div class="homeTitle">
      <p>{{ info.name }}</p>
    </div>

    <div class="homeIntroduce">
      <p>{{ info.brief }}</p>
      <div class="money">
        <span>原价：￥{{ info.counterPrice }}</span>
        <span>现价：￥{{ info.retailPrice }}</span>
      </div>
      <div class="manufacturer">
        <span>{{ brand.name }}</span>
      </div>
    </div>

    <div class="homeChoose">
      <van-cell is-link :title="homeObjSpecification" @click="show = true" />
      <van-action-sheet v-model:show="show" title=" ">
        <SpecificationCard @updatetitle="updateTitle"></SpecificationCard>
      </van-action-sheet>
    </div>
    <div class="comments">
      <van-cell is-link title="评论区" @click="tocommet" />
      <All
        :limit="2"
        :types="1"
        :isShow="true"
        :style="commentcss"
        :goodid="this.$store.state.goodsid"
        finished-text=" "
      ></All>
    </div>

    <div class="parameter">
      <p>商品参数</p>
      <div v-for="(item, index) in attribute" :key="index">
        <p>{{ item.attribute }}</p>
        <van-text-ellipsis
          :content="item.value"
          :rows="1"
          expand-text="展开"
          collapse-text="收起"
        />
      </div>
    </div>

    <div class="detail" v-html="this.info.detail" style=""></div>

    <ProductInformation></ProductInformation>

    <div class="homeShoppingCart1">
      <van-action-bar>
        <van-action-bar-icon
          :icon="isFavorite ? 'star-o' : 'star'"
          color="red"
          :text="isFavorite ? '收藏' : '已收藏'"
          @click="addCollect"
        />
        <van-action-bar-icon
          icon="cart-o"
          text="购物车"
          @click="toshoppingcar"
        />
        <van-action-bar-button
          type="warning"
          text="加入购物车"
          @click="show = true"
        />
        <van-action-bar-button
          type="danger"
          text="立即购买"
          @click="show = true"
        />
      </van-action-bar>
    </div>
  </div>
</template>
  
<script>
import All from "../components/AllComment";
import ProductInformation from "../components/ProductInformation";
import commentcss from "../assets/css/comment.css";
import SpecificationCard from "@/components/SpecificationCard";
import { service } from "../api/config";
import { ref } from "vue";
import { showToast } from "vant";
export default {
  name: "goodsdetail",
  data() {
    return {
      id: 0,
      num: 1,
      img: "",
      data: {},
      info: {},
      show: false,
      price: 0,
      color: 0,
      brand: {},
      commentcss: {},
      attribute: [],
      homeObjSpecification: "数量规格选择",
      //收藏
      type: "",
      valueId: "",
      active: "",
      //用于存储是否收藏成功 index==0是取消收藏 index！=0是成功收藏
      index: 0,
      isFavorite: false,
    };
  },
  setup() {
    const onClickLeft = () => history.back();
    const value = ref(1);
    return {
      onClickLeft,
      value, //商品购买数量
    };
  },
  components: {
    All,
    ProductInformation,
    SpecificationCard,
  },

  mounted() {
    service
      .get("/wx/cart/index", {
        token: localStorage.getItem("token"),
      })
      .then((res) => {
        this.cartList = res.data.data.cartList;
      });
    // 从本地存储中读取收藏状态
    const favorite = localStorage.getItem("favorite");
    if (favorite != null) {
      this.isFavorite = JSON.stringify(this.isFavorite);
    }
    service
      .get("/wx/goods/detail", { params: { id: this.$store.state.goodsid } })
      .then((res) => {
        if (res.data.errno != 502) {
          this.data = res.data.data;
          this.info = this.data.info;
          this.brand = this.data.brand;
          this.attribute = this.data.attribute;
          //商品收藏id
          this.valueId = this.data.info.id;
        } else {
          showToast({
            message: "没有数据",
            icon: require("@/assets/images/sad.png"),
          });
        }
      });
  },
  methods: {
    toshoppingcar() {
      this.$router.push("/ShoppingCart");
    },
    tocommet() {
      this.$router.push("/comment");
    },
    addCollect() {
      if (localStorage.getItem("userInfo") != null) {
        service
          .post("/wx/collect/addordelete", {
            type: 0, //this.type, //收藏列表
            valueId: this.valueId, //收藏商品id
          })
          .then((res) => {
            if (this.isFavorite == false) {
              // 切换收藏状态
              this.isFavorite = !this.isFavorite;
              // // 保存到本地存储中
              localStorage.setItem("favorite", JSON.stringify(this.isFavorite));
              localStorage.removeItem("favorite");
              showToast("成功收藏");
            } else {
              // 切换收藏状态
              this.isFavorite = !this.isFavorite;
              // 保存到本地存储中
              localStorage.setItem("favorite", JSON.stringify(this.isFavorite));
              localStorage.removeItem("favorite");
              showToast("取消收藏");
            }
            console.log(res);
          });
      } else {
        showToast("请先登录,才能收藏商品哦");
      }
    },
    updateTitle(msg) {
      this.homeObjSpecification = msg;
    },
  },
};
</script>
<style scoped>
.detailView {
  background-color: #f4f4f4;
}

.homeImg {
  width: 100%;
}

.homeTitle {
  background-color: #f4f4f4;
  position: relative;
  bottom: 4rem;
}

.homeTitle p {
  margin: 0 0 0 10rem;
  font-size: 20rem;
  font-weight: bold;
  line-height: 40rem;
}

.parameter {
  background: white;
  padding-bottom: 20rem;
}

.parameter > p {
  font-size: 20rem;
  padding: 10rem;
}

.parameter > div {
  background: #f7f7f7;
  display: flex;
  align-items: center;
  margin-bottom: 3rem;
}

.parameter div p:nth-child(1) {
  width: 100rem;
  color: #999999;
  margin-left: 20rem;
}

.parameter div .van-text-ellipsis {
  font-size: 18rem;
  width: 85vw;
}

.homeIntroduce {
  padding: 10rem 0 10rem 10rem;
  font-size: 10rem;
  background: white;
}

.homeIntroduce p {
  color: #999999;
  margin-bottom: 15rem;
}

.homeIntroduce .money span:nth-child(1) {
  text-decoration: line-through;
  color: #999999;
}

.homeIntroduce .money span:nth-child(2) {
  color: #b2975c;
  padding-left: 15rem;
}

.homeIntroduce .manufacturer {
  margin: 20rem 0;
}

.homeIntroduce .manufacturer span {
  border: 1rem solid #f59c3e;
  color: #f59c3e;
  line-height: 20rem;
  padding: 4rem 15rem 4rem 4rem;
}

.homeChoose {
  border-top: #bdbdbd solid 1rem;
}

.homeChoose .van-cell {
  padding-left: 5rem;
}

.homeChoose .title {
  display: flex;
}

.homeChoose .title img {
  width: 25%;
  padding: 10rem;
}

.homeChoose .title > div > p {
  margin: 40rem 0 0rem;
}

.homeChoose .title div div {
  display: flex;
}

.homeChoose .title div div p:nth-child(2) {
  margin-right: 15rem;
}

.homeChoose .content {
  padding: 16rem 16rem 16rem;
}

.homeChoose .content .val {
  display: flex;
}

.homeChoose .content .val .chooseInAction {
  border: solid 1rem black;
  padding: 5rem 15rem;
  margin: 5rem 10rem 15rem 0;
  color: black;
}

.homeChoose .content .val .chooseAction {
  color: orangered;
  border: 1rem solid orangered;
  padding: 5rem 15rem;
  margin: 5rem 10rem 15rem 0;
}

.homeChoose .num {
  padding-bottom: 45rem;
}

.homeChoose .num p {
  margin-bottom: 5rem;
}

.homeShoppingCart1 {
  margin-top: 50rem;
}

.shoppingStyle {
  color: #000000;
}

.shoppingStyle1 {
  color: #ffffff;
}

.detail :deep(p) {
  margin: -4rem 0;
}

.detail :deep(img) {
  width: 100%;
}
</style>
  
  
  
  